<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      div {
        color: white;
        font-size: 40px;
        text-align: right;
      }

      .wrap {
        width: 500px;
        height: 700px;
        background-color: #3c3c3a;
        margin: 50px auto;
      }

      .screen {
        width: 100%;
        height: 200px;
        line-height: 200px;
        font-size: 60px;
      }

      .numwrap {
        width: 100%;
        height: calc(100% - 200px);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        /* background-color: blue; */
      }

      .numwrap div {
        width: calc((100% / 4) - 2px);
        height: calc((100% / 5) - 2px);
        border: 1px solid #3c3c3a;
        text-align: center;
        line-height: 98px;
        background-color: #6b6b69;
      }

      .numwrap div:nth-child(1),
      .numwrap div:nth-child(16) {
        width: calc((100% / 2) - 2px);
      }

      .numwrap div:nth-child(16) {
        text-align: left;
        text-indent: 1.2em;
      }

      .numwrap div:nth-child(1),
      .numwrap div:nth-child(2) {
        background-color: #4e4e4c;
      }

      .numwrap div:nth-child(3),
      .numwrap div:nth-child(7),
      .numwrap div:nth-child(11),
      .numwrap div:nth-child(15),
      .numwrap div:nth-child(18) {
        background-color: #ff9833;
      }
    </style>
  </head>

  <body>
    <div class="wrap">
      <!-- 显示屏 -->
      <div class="screen"></div>
      <!-- 数字按键+计算按键 -->
      <div class="numwrap">
        <!-- <div>AC</div>
            <div>%</div>
            <div>/</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>*</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>-</div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>+</div>
            <div>0</div>
            <div>.</div>
            <div>=</div> -->
      </div>
    </div>
    <script>
      //获取元素
      var screen = document.getElementsByClassName("screen")[0];
      var btns = document
        .getElementsByClassName("numwrap")[0]
        .getElementsByTagName("div");
      var numwrap = document.getElementsByClassName("numwrap")[0];
      console.log(screen, btns);
      //内容填充
      let contents = [
        "AC",
        "%",
        "/",
        "7",
        "8",
        "9",
        "*",
        "4",
        "5",
        "6",
        "-",
        "1",
        "2",
        "3",
        "+",
        "0",
        ".",
        "=",
      ];
      for (let i = 0; i < contents.length; i++) {
        numwrap.innerHTML += `
									<div>${contents[i]}</div>
								  `;
      }
      console.log(contents); //
      //显示屏清空效果
      btns[0].onclick = function () {
        screen.innerHTML = "";
      };
      //按键赋值
      for (var i = 1; i < btns.length - 1; i++) {
        btns[i].onclick = function () {
          screen.innerHTML += this.innerHTML;
        };
      }
      //计算按钮
      btns[17].onclick = function () {
        screen.innerHTML = eval(screen.innerHTML);
      };
    </script>
  </body>
</html>
